<!--
 * @Overview     : Demo
 * @Author       : Zi Jun
 * @Email        : zijun2030@163.com
 * @Date         : 2021-12-04 14:25:59
 * @LastEditTime : 2021-12-04 21:17:05
 * @LastEditors  : Zi Jun
-->

<template>
  <h1 class="text-xl text-red-600">1. 图标（icon/svg）使用</h1>
  <div class="text-lg font-normal text-blue-500">
    <h3>引用xicon中的icon</h3>
    <n-icon size="50" color="#0e7a0d">
      <AccessAlarmFilled />
    </n-icon>
    <h3>引用assets/svg目录下的svg</h3>
    <svg-icon name="404" class="w-[100px] h-[100px]"></svg-icon>
    <h3>引用iconfont-单色图标</h3>
    <i class="text-3xl iconfont icon-yanjing"></i>
    <h3>引用iconfont-多色图标</h3>
    <svg-icon name="chenggong" class="w-[50px] h-[50px]"></svg-icon>
  </div>
</template>

<script lang="ts" setup name="Demo">
import { AccessAlarmFilled } from '@vicons/material';
</script>